import React, { PureComponent } from "react";
import {
  Text,
  View,
  Image,
  TextInput,
  Alert,
  Platform,
  TouchableOpacity,
  Keyboard,
  StyleSheet
} from "react-native";
import {
  statusBarHeight,
  safeAreaBottomHeight,
  LoginToken,
  screenHeight
} from "../../util/AdapterUtil";
import NavigationService from "../../components/NavigationService";
import actions from "../../models/actions";
import { connect } from "react-redux";
import NavigationBar from "../../components/navigationBar";
import PasswordInput from "../../components/paykeybordview/PasswordInput";
import { NavigationEvents } from "react-navigation";
import MD5 from "react-native-md5";
import * as requestApi from "../../util/requestApi";

class SetPayPassword extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      password1: "",
      password2: "",
      tip: "设置新的支付密码"
    };
  }
  componentWillUnmount() {}
  componentDidMount() {
    if (this.props.navigation.state.params.hasOwnProperty("istohome")) {
      let { istohome } = this.props.navigation.state.params;
      if (istohome) {
        this.setState({
          tip: "设置支付密码"
        });
      }
    }
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "#fff" }}>
        <NavigationEvents
          onWillFocus={payload => {
            this.refs.input.show();
          }}
        />
        <NavigationBar
          navigation={this.props.navigation}
          isBack={true}
          title={"支付密码"}
        />

        <View
          style={{
            width: "100%",
            backgroundColor: "#fff",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <Text
            style={{
              color: "#202020",
              marginBottom: 35,
              marginTop: 20,
              fontSize: 20,
              fontWeight: "bold"
            }}
          >
            {this.state.tip}
          </Text>

          <PasswordInput
            ref="input"
            onDone={data => {
              if (this.state.password1 === "") {
                this.setState({
                  password1: data,
                  tip: this.props.navigation.state.params.hasOwnProperty(
                    "istohome"
                  )
                    ? this.props.navigation.state.params.istohome
                      ? "确认支付密码"
                      : "确认新的支付密码"
                    : "确认新的支付密码"
                });
                this.refs.input.show(); //清除输入框
              } else {
                this.setState({ password2: data });
                if (this.state.password1 === data) {
                  //2次一样
                  this.resetPassword();
                } else {
                  //2次不一样
                  Toast.show("2次密码不一致");
                }
              }
            }}
          />
        </View>

        <View style={{ height: safeAreaBottomHeight }} />
      </View>
    );
  }

  hiddenKeyborad() {
    Keyboard.dismiss();
  }

  resetPassword = () => {
    let istohome = false;
    if (this.props.navigation.state.params.hasOwnProperty("istohome")) {
      istohome = this.props.navigation.state.params.istohome;
    }
    let { password1 } = this.state;
    let sign = MD5.hex_md5(password1);
    let params = { newTradePassword: sign, confirmTradePassword: sign };
    if (this.props.navigation.state.params.hasOwnProperty("oldTradePassword")) {
      //旧支付密码重置新支付密码 oldTradePassword穿过来的已经是加密的
      let { oldTradePassword } = this.props.navigation.state.params;
      params = {
        newTradePassword: sign,
        confirmTradePassword: sign,
        oldTradePassword: oldTradePassword
      };
    }

    requestApi
      .setPayPassword(params)
      .then(res => {
        Toast.show("设置成功", 1000);
        global.havaPayPassword = true;
        //保存用户信息
        global.storage.save({
          key: "havaPayPassword",
          data: true,
          expires: null
        });
        if (istohome) {
          NavigationService.pop();
        } else {
          NavigationService.pop(2); //多返回一次 过滤掉 验证支付密码页面
        }
      })
      .catch(err => {
        Toast.show(err.msg, 1000);
      });
  };
}

const styles = StyleSheet.create({
  loginTitle: {
    marginLeft: 15,
    marginTop: 25,
    color: "#202020",
    fontSize: 30,
    fontWeight: "bold"
  }
});

export default connect(
  ({ userInfo }) => ({
    userInfo
  }),
  {
    getLoginToken: actions.getLoginToken
  }
)(SetPayPassword);
